﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="radiobtn,layer"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">
        外部按钮操作radio选中
        <a class="rayui-btn btn-success" id="render">重新渲染所有控件</a>
    </h3>
    <div class="row row-aline">
        <label>混合样式</label>
        <div class="row-content" id="radiobtngroup">
            <input class="rayui-radiobtn" type="radio" ray-title="书籍" name="hobby" checked="checked" value="1" />
            <input class="rayui-radiobtn" type="radio" ray-title="游泳" name="hobby" id="youyong" value="2" skin="chk" />
            <input class="rayui-radiobtn" type="radio" ray-title="拳击" name="hobby" value="3" skin="outer" />
            <input class="rayui-radiobtn" type="radio" ray-title="足球" name="hobby" value="4" skin="bgcolor" />
            <input class="rayui-radiobtn" type="radio" ray-title="跑步" name="hobby" disabled skin="box" />

            <a class="rayui-btn btn-primary externalAction" id="check">选择游泳</a>
            <a class="rayui-btn btn-primary externalAction" id="on">监听选中</a>
            <a class="rayui-btn btn-primary externalAction" id="off">取消监听</a>
        </div>
    </div>

    <h3 class="spliter">默认样式，返回true或false</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" ray-title="书籍" name="hobby1" checked="checked" />
            <input class="rayui-radiobtn" type="radio" ray-title="游泳" name="hobby1" />
            <input class="rayui-radiobtn" type="radio" ray-title="跑步" name="hobby1" disabled />
        </div>
    </div>

    <h3 class="spliter">checkbox样式</h3>
    <div class="row row-aline">
        <label>checkbox样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" skin="chk" ray-title="书籍" name="chk" checked="checked" />
            <input class="rayui-radiobtn" type="radio" skin="chk" ray-title="游泳" name="chk" />
            <input class="rayui-radiobtn" type="radio" skin="chk" ray-title="跑步" name="chk" disabled />
        </div>
    </div>

    <h3 class="spliter">outer样式（和checkbox-outer一致）</h3>
    <div class="row row-aline">
        <label>outer样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" name="outer" skin="outer" ray-title="书籍" checked="checked" />
            <input class="rayui-radiobtn" type="radio" name="outer" skin="outer" ray-title="游泳" />
            <input class="rayui-radiobtn" type="radio" name="outer" skin="outer" ray-title="跑步" disabled />
        </div>
    </div>


    <h3 class="spliter">bgcolor样式（和checkbox-bgcolor一致）</h3>
    <div class="row row-aline">
        <label>bgcolor样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" name="bgcolor" skin="bgcolor" ray-title="书籍" checked="checked" />
            <input class="rayui-radiobtn" type="radio" name="bgcolor" skin="bgcolor" ray-title="游泳" />
            <input class="rayui-radiobtn" type="radio" name="bgcolor" skin="bgcolor" ray-title="跑步" disabled />
        </div>
    </div>

    <h3 class="spliter">box样式（和checkbox-box一致）</h3>
    <div class="row row-aline">
        <label>box样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" name="box" skin="box" ray-title="书籍" checked="checked" />
            <input class="rayui-radiobtn" type="radio" name="box" skin="box" ray-title="游泳" />
            <input class="rayui-radiobtn" type="radio" name="box" skin="box" ray-title="跑步" disabled />
        </div>
    </div>


    <script>
        rayui.ready(function () {

            var radiobtn = rayui.radiobtn,
                layer = rayui.layer;

            radiobtn.render();

            $("#render").click(function () {
                radiobtn.render();
                layer.msg({ content: "重新渲染完毕", time: 2000, shade: false });
            });

            $("#check").click(function () {
                radiobtn.check("#youyong");
            });
            $("#on").click(function () {
                radiobtn.on("check", function (obj) {
                    layer.alert("选中的name=" + obj.name + ",value=" + obj.value, { shade: false });
                }, "#radiobtngroup");

            });
            $("#off").click(function () {
                radiobtn.off("check", "#radiobtngroup");
                layer.msg({ content: "已经取消监听", time: 2000, shade: false });
            });

        })

    </script>

    <div class="card">
        disabled和readonly标记在功能上是一样的，唯一区别就是disabled的标签在form上传的时候无法上传
    </div>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

属性：
skin：皮肤，可选：不填|chk-outer|chk-bgcolor|chk-box
ray-title：显示内容

方法：
on：function (event, callback, container)：监听指定容器内radio的选中事件
                event：现在只支持check事件
                callback：function(obj)：obj包含：
                                elem: 原始input,
                                name:原始radio的name值
                                value:选中的value
                container：容器
off：function (event, container)：取消监听指定容器内radio的event事件。
render：function(type, container)：type可选select|ul，container可填可不填，填写可以实现渲染指定容器内的select
check：选中单选框，触发事件

</pre>

</body>
</html>